<template>
  <div>
    <el-row style="width: 92%;margin: 20px auto">
      <el-button @click="showAdduser = true" plain>新增用户</el-button>
    </el-row>
    <el-table :data="users" style="width: 92%;margin: 10px auto">
      <el-table-column prop="productnametaste" label="编号" sortable>
      </el-table-column>
      <el-table-column prop="productname" label="姓名">
      </el-table-column>
      <el-table-column prop="productnamenum" label="性别">
      </el-table-column>
      <el-table-column prop="productnamenum" label="权限">
      </el-table-column>
      <el-table-column prop="productnamenum" label="联系方式">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="primary" @click="reviseUser=true">修改</el-button>
          <el-button type="text" size="primary" @click="deleteItem">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增用户"
      :visible.sync="showAdduser"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="姓名">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select placeholder="请选择用户权限" v-model="userLimit" style="width:100%">
            <el-option label="普通用户" value="0"></el-option>
            <el-option label="高级用户" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAdduser = false">取 消</el-button>
        <el-button type="primary" @click="showAdduser = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改学校"
      :visible.sync="reviseUser"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="姓名">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select placeholder="请选择用户权限" v-model="userLimit" style="width:100%">
            <el-option label="普通用户" value="0"></el-option>
            <el-option label="高级用户" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseUser = false">取 消</el-button>
        <el-button type="primary" @click="reviseUser = false">修 改 </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      showAdduser: false,
      reviseUser: false,
      abelPosition: 'right',
      userSex: '',
      userLimit: '',
      users: [{
        number: '2',
        productname: '1',
        productnamenum: '1',
        productnamesize: '1',
        productnametaste: '1',
        producttime: '1',
      }, {
        number: '2',
        productname: '1',
        productnamenum: '2',
        productnamesize: '31',
        productnametaste: '1',
        producttime: '1',
      }, {
        number: '2',
        productname: '1',
        productnamenum: '4',
        productnamesize: '5',
        productnametaste: '1',
        producttime: '1',
      }, {
        number: '2',
        productname: '1',
        productnamenum: '6',
        productnamesize: '7',
        productnametaste: '1',
        producttime: '1',
      }],
    };
  },
  methods: {
    deleteItem() {
      this.$confirm('是否删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
